<template lang="html">
  <div class="box">
    <topLogin :isIndex="false"></topLogin>
    <topNav :isActive="1"></topNav>
    <div class="main-box wid-1200 min-height">
      <div class="page-type">
        景区资讯
      </div>
      <ul>
        <li v-for='(item , index) in items' :key="index">
          <div class="img-box" v-if="item.imgSrc!= ''">
            <img :src="item.imgSrc" alt="">
          </div>
          <div class="content-box">
            <div class="title-name">
              <p class=" only-1"><span v-if="item.isNew">最新</span>{{item.title}}</p>
              <div class="time-box">
                作者：{{item.author}}
                <span>{{item.time}}</span>
              </div>
            </div>
            <div class="details-box">
              {{item.content}}
              <router-link to='/advisory/details'>[查看详情]</router-link>
            </div>
          </div>
        </li>
      </ul>
       <div class="page-box">
        <Page :total="100" show-elevator />
      </div>
    </div>
    <footNav></footNav>
  </div>
</template>

<script>
import topNav from "@/components/topNav/index";
import footNav from "@/components/footNav/index";
import topLogin from "@/components/topLogin/index";
//临时图片
import advisoryImg from '../../assets/temporary/advisoryImg.jpg'
//iview
import { Page } from "view-design";
export default {
  components: {
    topNav,
    footNav,
    topLogin,
    [Page.name]:Page
  },
  data(){
    return{
      items:[
        {isNew:false,author:'张XX',time:"2020-06-20",imgSrc:advisoryImg,title:'京城最大“绿肺”温榆河公园复工',content:'  3月17日，溫榆河公園示范區三個標段、配套建筑、水利工程全部復工，示范區實現全面復工。溫榆河公園是新時代首都生態文明建設的精品工程，是首都生態環境的“金名片”。2017年以來，北京市委書記蔡奇先后5次調研溫榆河公園，2019年12月11日調研時更是強調，溫榆河公園是擴大城市綠色生態空間、提升人居環境'},
        {isNew:true,author:'张XX',time:"2020-06-20",imgSrc:'',title:'京城最大“绿肺”温榆河公园复工',content:'  3月17日，溫榆河公園示范區三個標段、配套建筑、水利工程全部復工，示范區實現全面復工。溫榆河公園是新時代首都生態文明建設的精品工程，是首都生態環境的“金名片”。2017年以來，北京市委書記蔡奇先后5次調研溫榆河公園，2019年12月11日調研時更是強調，溫榆河公園是擴大城市綠色生態空間、提升人居環境'}
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/basis";
@import "@/assets/css/pageType";
.main-box{

  ul {
    li{
      display: flex;
      width:100%;
      height:116px;
      padding: 20px 16px;
      margin: 0 0 10px;
      background:rgba(255,255,255,1);
      .img-box{
        min-width: 100px;
        max-width: 100px;
        margin-right:  15px
      }
      .content-box{
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title-name{
          display: flex;
          justify-content: space-between;
          font-size: 16px;
          color: #333;
          font-weight: bold;
          width: 100%;
          .time-box{
            font-size: 12px;
            color: #999;
            font-weight: normal;
            span{
              margin-left: 20px;
            }
          }
          >p{
            flex: 1;
            max-width: 800px;
            min-width: 800px;
            span{
              display: inline-block;
              width:34px;
              height:18px;
              margin-right: 6px;
              font-size: 12px;
              color: $colorRed;
              text-align: center;
              line-height:16px;
              border:1px solid rgba(199,5,5,1);
              border-radius:2px;
            }
          }

        }
        .details-box {
            color: #998;
            font-size: 14px;
            line-height: 1.8
        }
      }
    }
  }
  .page-box {
    padding: 10px 0 30px;
    text-align: center;
  }

}
</style>
